<template>
  <div>
    <div class="sideBar-wrpper">
      <el-tooltip class="item" effect="dark" content="在线咨询(工作时间：周一至周五)" placement="left">
        <a @click.once="countConsult" :href="`http://wpa.qq.com/msgrd?v=3&uin=${QQNum}&site=qq&menu=yes`" target="_blank" id="service" class="service sideItem">
          <i class="icon icon-zaixianzixun"></i>
          <!-- <p class='side-text'>在线咨询</p> -->
        </a>
      </el-tooltip>
      <p class="center-line"></p>
      <el-tooltip class="item" effect="dark" :content='servicePhone' placement="left">
        <div class="idea-wrapper sideItem">
          <i class="icon icon-kefudianhua_n"></i>
          <!-- <p class='side-text'>客服</p> -->
        </div>
      </el-tooltip>
      <p class="center-line"></p>
      <el-tooltip class="item" effect="dark" content="意见反馈" placement="left">
         <div class="idea-wrapper sideItem" @click="ideaFn">
          <i class="icon icon-yijianfankui_n"></i>
          <!-- <p class='side-text'>意见反馈</p> -->
        </div>
      </el-tooltip>
      <p id="down-line" class="center-line"></p>
      <el-tooltip ref="goBack" class="item" effect="dark" content="回到顶部" placement="left">
        <div class="backTop  sideItem" @click="backTop" ref="backTop">
          <i class="icon icon-fanhuiddengbu_n"></i>
          <!-- <p class='side-text'>回到顶部</p> -->
        </div>
      </el-tooltip>
    </div>
  </div>
</template>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
@import '~style/modify.styl';

.btn-wrapper {
  padding: 15px 0 28px;

  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

// 测边栏
.sideBar-wrpper {
  position: fixed;
  // top: 50%;
  bottom: 100px;
  margin-top: -100px;
  right: 0;
  width: 56px;
  z-index: 1000;
  background: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: -8px 0px 24px rgba(49, 49, 49, 0.12);

  div {
    width: 56px;
    height: 56px;
    text-align: center;
    cursor: pointer;
  }

  .backTop {
    display: none;
    opacity: 0;
    filter: Alpha(opacity = 50);
  }

  .service {
    // background-color: $color-sub-pay;
    display: block;
    text-align: center;
    // padding-bottom: 8px;
    text-decoration: none;
    height: 88px;
    line-height: 104px;

    .icon-zaixianzixun:before {
      color: $color-theme;
    }

    .side-text {
      margin: 0;
      padding: 0;
      color: $color-text;
    }
  }

  .backTop, .idea-wrapper {
    height: 88px;
    line-height: 88px;
  }

  .idea-wrapper {
    &:hover .icon-yijianfankui_n:before {
      color: $color-theme;
    }
    &:hover .icon-kefudianhua_n:before {
      color: $color-theme;
    }
  }

  .backTop {
    &:hover .icon-fanhuiddengbu_n:before {
      color: $color-theme;
    }
  }

  .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 24px;
    // color: $color-text-l;
  }

  .center-line {
    width: 28px;
    height: 1px;
    border-bottom: 1px solid rgba(219, 219, 219, 1);
    margin: 0 auto;
  }

  #down-line {
    display: none;
  }

  .side-text {
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 8px;
    -webkit-transform: scale(0.6667);
    -ms-transform: scale(0.6667);
    -o-transform: scale(0.6667);
    -moz-transform: scale(0.6667);
    line-height: 8px;
    color: $color-text-l;
  }
}
</style>
<script>
import Vue from 'vue'
import BackToTop from 'vue-backtotop'
import {
  feedbackAdd,
  canFeedBack
} from '../../api/getData'
import {
  mapActions,
  mapState,
  mapGetters
} from 'vuex'
import {
  userInfo,
  statisticsSave
} from 'api/getData'
Vue.use(BackToTop)
export default {
  data() {
    return {
      showPopper: true,
      value: true
    }
  },
  computed: {
    ...mapState(['feedBackShow', 'isLogin', 'currentUser', 'cityId', 'cityName']),
    ...mapGetters(['servicePhone','QQNum']),
    dialogVisible() {
      return this.feedBackShow;
    },
  },
  methods: {
    ...mapActions(['setSideShowFn', 'setDialogClose']),
    ideaFn() {
      // this.setSideShowFn(true)
      if (this.isLogin) {
        canFeedBack(this.currentUser.type, this.currentUser.cluesOrStuId.toString()).then(res => {
          if (res.data.msg) {
            this.setSideShowFn(true)
          } else {
            this.$alert('当天最多填写10次意见反馈', '提示', {
              confirmButtonText: '确定',
              showClose: false,
              callback: action => {
              }
            });
          }
        })
      } else {
        // this.setDialogClose(true)
        this.$alert('登录后才可以填写意见反馈哦!', '提示', {
          confirmButtonText: '立即登录',
          showClose: true,
          callback: action => {
            if (action == 'confirm') {
              setTimeout(() => {
                this.setDialogClose(true)
              }, 400);
            }
          }
        });
      }
      // this.setSideShowFn(true);
    },
    // 回到顶部动画
    backTop() {
      let backTopDom = document.getElementsByClassName('el-tooltip__popper'),
        length = backTopDom.length;
      for (let i = 0; i < length; i++) {
        backTopDom[i].style.display = 'none'
      }

      let obtn = this.$refs.backTop,
        //文档高度
        clientHeight = document.documentElement.clientHeight,
        time = null,
        isTop = true,
        cancelScroll = false;

      if (cancelScroll == false) {
        time = setInterval(function () {
          var osTop = document.documentElement.scrollTop || document.body.scrollTop;
          var ispeed = Math.floor(-osTop / 10);
          document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
          isTop = true;
          if (osTop === 0) {
            clearInterval(time);
          }
        }, 13);
      } else {
        clearInterval(time);
        cancelScroll = true;
      }
    },
    countConsult(){
      let userId = this.currentUser && this.currentUser.cluesOrStuId || '',
        account = this.currentUser && this.currentUser.account || '',
        cityId = this.cityId && this.cityId || '',
        cityName = this.cityName && this.cityName || ''

      statisticsSave(cityId, cityName, userId, account)
    },
  },
  mounted() {
    let obtn = this.$refs.backTop,
      line = document.getElementById('down-line'),
      timer,
      alpha = 0
    addEvent(window, 'scroll', function () {
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (scrollTop < 400) {
        startchange(0)
      } else {
        startchange(100)
      }
    })
    // 透明动画函数
    function startchange(value) {
      clearInterval(timer)
      let speed = 0;

      if (value > alpha) {
        speed = 10;
      } else if (value < alpha) {
        speed = -10;
      }
      if (value === 100) {
        obtn.style.display = 'block';
        line.style.display = 'block';

      }
      timer = setInterval(function () {
        if (value === alpha) {
          clearInterval(timer)
        } else {
          alpha += speed;
          obtn.style.filter = 'alpha(opacity:' + alpha + ')'
          obtn.style.opacity = alpha / 100
          line.style.filter = 'alpha(opacity:' + alpha + ')'
          line.style.opacity = alpha / 100
          if (alpha === 0) {
            obtn.style.display = 'none'
            line.style.display = 'none'
          }
        }
      }, 10)
    }

    // 绑定事件兼容
    function addEvent(obj, type, eFn) {
      function fn(e, b) {
        e = e || window.event;
        eFn.call(obj, e)
      }
      if (window.addEventListener) {
        obj.addEventListener(type, fn, false)
      } else {
        obj.attachEvent('on' + type, fn)
      }
      return fn;
    }
  },
  watch: {

  }
}

</script>
